<template>
	<view class="rechargeRecord">
		<u-navbar title="查看更多" :title-size="35" :title-bold="true" :immersive="true" :background="background"
			:border-bottom="false"></u-navbar>
		<view class="time">
			请选择时间
		</view>
		<uni-section :title="'日期范围用法：' + '[' + dateRange + ']'" type="line"></uni-section>
		<view class="example-body">
			<uni-datetime-picker v-model="dateRange" type="daterange" @maskClick="maskClick" @change="datachange" />
		</view>
		<view class="boxs">
			<view class="box-cen">
				<view class="tit">总营业额：{{InfoList.syncmoney?InfoList.syncmoney:'0'}}元</view>
			</view>
		</view>
		<view class="boxs">
			<view class="box-cen">
				<view class="tit">订单数量：{{InfoList.orderNum?InfoList.orderNum:'0'}}单</view>
			</view>
		</view>
		<view class="boxs">
			<view class="box-cen">
				<view class="tit">到店访客：{{InfoList.ddUsers?InfoList.ddUsers:'0'}}人</view>
			</view>
		</view>
		<view class="boxs">
			<view class="box-cen">
				<view class="tit">区间用户：{{InfoList.users?InfoList.users:'0'}}人</view>
			</view>
		</view>
		<view class="boxs">
			<view class="box-cen">
				<view class="tit">新增会员：{{InfoList.newMemberUser?InfoList.newMemberUser:'0'}}人</view>
			</view>
		</view>
		<view class="boxs">
			<view class="box-cen">
				<view class="tit">总共时长：{{InfoList.long?countdown(InfoList.long):'0分'}}</view>
			</view>
		</view>
		<!-- 
				<view class="box-cen">
					<view class="tit">到店访客：{{InfoList.ddUsers?InfoList.ddUsers:'/'}}人</view>
				</view>
				<view class="box-cen">
					<view class="tit">区间用户：{{InfoList.users?InfoList.users:'/'}}人</view>
				</view>
				<view class="box-cen">
					<view class="tit">新增会员：{{InfoList.newMemberUser?InfoList.newMemberUser:'/'}}人</view>
				</view>
				<view class="box-cen">
					<view class="tit">总共时长：{{InfoList.long?countdown(InfoList.long):'/'}}</view>
				</view> -->

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateRange: [],
				InfoList: {},
			}
		},
		watch: {
			dateRange() {
				console.log('日期范围选:', this.dateRange);
				this.Info()
			}
		},
		onShow() {},
		onLoad() {
			if (uni.getStorageSync('Bshop_name') == '') {
				uni.showToast({
					icon: 'none',
					title: '请在首页选择店铺哦！'
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			}

		},
		methods: {
			// 时间转化
			countdown(time) {
				const that = this
				let day = parseInt(time / 60 / 60 / 24)
				let hr = parseInt(time / 60 / 60 % 24)
				let min = parseInt(time / 60 % 60)
				let sec = parseInt(time % 60)
				day = day > 9 ? day : '0' + day
				hr = hr > 9 ? hr : '0' + hr
				min = min > 9 ? min : '0' + min
				sec = sec > 9 ? sec : '0' + sec
				let newhr = parseInt(hr) + parseInt(day * 24)
				return `${hr}小时${min}分`
			},
			// 首页信息
			Info() {
				this.$Api.manageData({
					type: 4,
					shopId: uni.getStorageSync('Bshop_id'),
					startTime: this.dateRange[0],
					endTime: this.dateRange[1]
				}).then(res => {
					this.InfoList = res.data.data
					console.log(res.data.data, '12121212')
				});
			},
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			},
			getDate(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return `${year}-${this.addZero(month)}-${this.addZero(day)}`
			},
			maskClick(e) {
				console.log('----maskClick事件:', e);
			},
			datachange(e) {
				console.log('change事件')
			},
			//充值接口
			record() {
				// this.$Api.rechargeList({
				// 	shopId: uni.getStorageSync('Bshop_id'),
				// 	pageNum: 15,
				// 	page: this.page,
				// }).then(res => {

				// 	console.log(res.data.data.data.list, '成功')
				// }, err => {})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/bg.png');
		padding-top: 200rpx;
	}

	.example-body {
		padding: 10px;
	}

	.boxs {
		width: 350px;
		height:50px;
		margin: auto;
		// padding: 25px;
		// background-color: #ffffff;
		border-radius: 10px;
	}

	.box-cen {
		width: 340px;
		height: 40px;
		border-radius: 20px;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
	}

	.tit {
		font-size: 15px;
		font-weight: 500;
	}

	.time {
		width: 150rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		margin-left: 32rpx;
	}

	/deep/ .uni-datetime-picker--btn {
		background-color: #19C865 !important;
	}

	/deep/ .uni-calendar-item--multiple .uni-calendar-item--before-checked,
	.uni-calendar-item--multiple .uni-calendar-item--after-checked {
		background-color: #19C865 !important;
	}

	/deep/ .uni-calendar-item__weeks-box .uni-calendar-item--checked {
		background-color: #19C865 !important;
	}
</style>